<!DOCTYPE html>
<html ng-app>
<head>
    <title>CSS和样式类</title>
    <script src="../angular.min.js" type="text/javascript"></script>
</head>
<body>
    <style type="text/css">
        .selected {
            background-color: lightgreen;
        }
    </style>
    <div ng-controller="tableController">
        <table width="500" border="1">
            <tr ng-repeat="people in peoples" ng-mouseover="select_row($index)" ng-class="{selected:$index==selectedRow}">
                <td width="30%">name:{{people.name}}</td>
                <td width="70%">mobile:{{people.mobile}}</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        function tableController($scope){
            $scope.peoples = [
                {name:'people a',mobile:'13899230014'},
                {name:'people b',mobile:'13855342243'},
                {name:'people c',mobile:'13623423333'},
                {name:'people d',mobile:'13144432235'}
            ];

            $scope.select_row = function(row){
                $scope.selectedRow = row;
            }
        }
    </script>
</body>
</html>